<template>
    <fieldset>
        <legend>modal封装</legend>
        <modal :visible="visible" @on-cancel="cancel" @on-confirm="confirm"></modal>
        <button @click="showModal">点击显示模态框</button>
    </fieldset>
</template>

<script>
import modal from '../../components/modal/index.vue'

export default {
    components:{
       modal,
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        showModal() {
            this.visible = true;
        },
        //模态框点击确定按钮的处理函数
        cancel() {
            this.visible = false;
        },
        //模态框点击取消按钮触发的事件处理函数
        confirm() {
            this.visible = false
        }
    }
}
</script>

<style scoped>
fieldset{
    margin-top: 10px;
    height: 120px;
    padding-top: 20px;
}

</style>